'use client'

import { useState, useEffect } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { IconAlertTriangle, IconCheck, IconX } from "@tabler/icons-react"

interface ConfirmDialogProps {
  isOpen: boolean
  title: string
  message: string
  confirmText?: string
  cancelText?: string
  type?: 'warning' | 'danger' | 'info'
  onConfirm: () => void
  onCancel: () => void
}

export default function ConfirmDialog({
  isOpen,
  title,
  message,
  confirmText = '确定',
  cancelText = '取消',
  type = 'warning',
  onConfirm,
  onCancel
}: ConfirmDialogProps) {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    if (isOpen) {
      setIsVisible(true)
    } else {
      const timer = setTimeout(() => setIsVisible(false), 200)
      return () => clearTimeout(timer)
    }
  }, [isOpen])

  if (!isVisible) return null

  const getTypeStyles = () => {
    switch (type) {
      case 'danger':
        return {
          icon: <IconAlertTriangle className="w-8 h-8 text-red-500" />,
          confirmButton: 'bg-red-600 hover:bg-red-700 text-white',
          cardBorder: 'border-red-200'
        }
      case 'info':
        return {
          icon: <IconCheck className="w-8 h-8 text-blue-500" />,
          confirmButton: 'bg-blue-600 hover:bg-blue-700 text-white',
          cardBorder: 'border-blue-200'
        }
      default:
        return {
          icon: <IconAlertTriangle className="w-8 h-8 text-yellow-500" />,
          confirmButton: 'bg-yellow-600 hover:bg-yellow-700 text-white',
          cardBorder: 'border-yellow-200'
        }
    }
  }

  const styles = getTypeStyles()

  return (
    <div className={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-200 ${
      isOpen ? 'opacity-100' : 'opacity-0'
    }`}>
      {/* 背景遮罩 */}
      <div 
        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
        onClick={onCancel}
      />
      
      {/* 弹窗内容 */}
      <Card className={`relative w-full max-w-md mx-4 transform transition-all duration-200 ${
        isOpen ? 'scale-100' : 'scale-95'
      } ${styles.cardBorder}`}>
        <CardHeader className="text-center pb-4">
          <div className="flex justify-center mb-3">
            {styles.icon}
          </div>
          <CardTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">
            {title}
          </CardTitle>
          <CardDescription className="text-gray-600 dark:text-gray-400">
            {message}
          </CardDescription>
        </CardHeader>
        
        <CardContent className="pt-0">
          <div className="flex gap-3">
            <Button
              variant="outline"
              onClick={onCancel}
              className="flex-1"
            >
              {cancelText}
            </Button>
            <Button
              onClick={onConfirm}
              className={`flex-1 ${styles.confirmButton}`}
            >
              {confirmText}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

// 使用示例的Hook
export function useConfirmDialog() {
  const [isOpen, setIsOpen] = useState(false)
  const [config, setConfig] = useState<{
    title: string
    message: string
    confirmText?: string
    cancelText?: string
    type?: 'warning' | 'danger' | 'info'
    onConfirm: () => void
  } | null>(null)

  const showConfirm = (config: {
    title: string
    message: string
    confirmText?: string
    cancelText?: string
    type?: 'warning' | 'danger' | 'info'
    onConfirm: () => void
  }) => {
    setConfig(config)
    setIsOpen(true)
  }

  const hideConfirm = () => {
    setIsOpen(false)
  }

  const handleConfirm = () => {
    if (config?.onConfirm) {
      config.onConfirm()
    }
    hideConfirm()
  }

  return {
    isOpen,
    config,
    showConfirm,
    hideConfirm,
    handleConfirm
  }
}
